<template>
  <header class="navbar" :style="{
    backgroundColor: bgColor,
    color: color,
    zIndex: zIndex
  }">
    <!-- 左侧插槽 -->
    <div class="navbar__left">
      <slot name="left"></slot>
    </div>

    <!-- 中间标题（优先插槽，fallback 到 props.title） -->
    <div class="navbar__center">
      <slot>
        <span v-if="title" class="navbar__title">{{ title }}</span>
      </slot>
    </div>

    <!-- 右侧插槽 -->
    <div class="navbar__right">
      <slot name="right"></slot>
    </div>
  </header>

  <!-- 占位元素（防止内容被 navbar 遮挡） -->
  <div v-if="placeholder" class="navbar__placeholder"></div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    default: ''
  },
  bgColor: {
    type: String,
    default: 'transparent' // ← 对应 $secondary-color
  },
  color: {
    type: String,
    default: '#e8e8e9' // ← 对应 $text-color
  },
  placeholder: {
    type: Boolean,
    default: false
  },
  zIndex: {
    type: [Number, String],
    default: 9999
  }
})
</script>

<style scoped lang="scss">
.navbar {
  @include flex-center;
  height: 46px;
  padding: 0 16px;
  @include fixed-top;
  z-index: 10000;
  font-size: $font-size-base;
  line-height: 46px;

  .navbar__left,
  .navbar__right {
    position: absolute;
  }

  .navbar__right {
    right: 16px;
  }

  .navbar__left {
    left: 16px;
  }

  // 覆盖插槽内容的默认样式
  &__left,
  &__center,
  &__right {
    @include flex-center;
    max-width: 30%;
  }

  &__center {
    flex: 1;
    text-align: center;
    overflow: hidden;
  }

  &__title {
    @include text-ellipsis;
    display: block;
  }
}

// 占位符：高度 = navbar 高度
.navbar__placeholder {
  height: 50px;
}

// 移动端适配（可选）
@media (max-width: 768px) {
  .navbar {
    height: 46px;
    line-height: 46px;
    padding: 0 12px;
    font-size: $font-size-base;
  }

  .navbar__placeholder {
    height: 46px;
  }
}
</style>